<template>
  <div>
    <el-form ref="ruleForm" :model="spuChannelDesc" class="text-description">
      <headline :headline="'商品详情页'">
        <span slot="head"><el-button type="text" @click="advertisingGuidelines">点击查看《沃尔玛大卖场电商商品详情页标准》</el-button></span>
      </headline>

      <el-form-item class="picList" prop="contentResourceList" :rules="[{ validator: contentResourceList, trigger: 'blur' }]">
        <picture-upload
          :is-disabled="isDisabled"
          :file-list="spuChannelDesc"
          :path="'contentResourceList'"
          :query-data="createQueryData()"
          :pic-number="100"
          :pic-size="1"
          :multiple="true"
          :type="contentResourceListType"
          :url-name="'intraNetUrl'"
          :upload-data-key="uploadDataKey"
          :del-data-key="delDataKey"
          :del-fun="deleteSpuContentResource"
          :upload-fun="uploadSpuContentResource"
        />
        <div class="tip">图片尺寸:宽 750px，仅支持JPG格式，详情页不能整张长图提交，需独立切片，单切片高度1000px，每张切片图不大于1MB</div>
      </el-form-item>
    </el-form>

    <div class="imgPreview" v-html="content" />
  </div>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import pictureUpload from '../../components/pictureUpload.vue'
import { CreateObject } from '@/utils/processingData.js'
import { uploadSpuContentResource, deleteSpuContentResource } from '@/api/coi/onlineTaskAPI/spu.js'
import {
  uploadSpuContentResource as uploadSpuContentResource_edit,
  deleteSpuContentResource as deleteSpuContentResource_edit
} from '@/api/coi/onlineTaskAPI/spuEdit.js'
import { createPicDom } from '@/views/coi/commonJs/createPicDom.js'

export default {
  name: 'TextDescription',
  components: {
    headline,
    pictureUpload
  },
  props: {
    spuChannelDesc: {
      type: Object,
      required: true
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    increased: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      uploadSpuContentResource: this.increased ? uploadSpuContentResource : uploadSpuContentResource_edit,
      deleteSpuContentResource: this.increased ? deleteSpuContentResource : deleteSpuContentResource_edit,
      uploadDataKey: [
        { key: 'file', value: 'raw' },
        { key: this.increased ? 'spuId' : 'chgSpuId', value: 'spuId' }
      ],
      delDataKey: [
        { key: this.increased ? 'spuId' : 'chgSpuId', value: 'spuId' },
        { key: 'url', value: 'intraNetUrl' }
      ],
      contentResourceList(rule, value, callback) {
        if (!value.length) callback(new Error('商品详情页不能为空'))
        else callback('')
      },
      contentResourceListType: ['jpg', 'jpeg']
    }
  },
  computed: {
    content() {
      return createPicDom(this.spuChannelDesc.contentResourceList, 'intraNetUrl', true)
    }
  },
  watch: {
    'spuChannelDesc.contentResourceList': {
      deep: true,
      handler(v) {
        if (Array.isArray(v)) this.spuChannelDesc.channelDesc = this.createHtml(v)
      }
    }
  },
  methods: {
    createQueryData() {
      return new CreateObject({ key: 'spuId', value: this.$route.params.spuId }, ...arguments)
    },
    createHtml(arr) {
      if (!arr || !Array.isArray(arr)) return null
      const imgHtml = (url, index) => {
        if (!url) return ''
        return `<img src="${url}" xid=${index} width="100%">`
      }
      const imgListHtml = arr.map((img, i) => imgHtml(img.intraNetUrl, i + 1)).join()
      return `<div xgroup='1' style="width:100%;margin:0; padding:0; text-align:center;">${imgListHtml}</div>`
    },
    advertisingGuidelines() {
      const guideBaseUrl = window.appConfig.operationGuideUrl
      window.open(`${guideBaseUrl}/display/PDF/沃尔玛大卖场商品详情页标准.pdf`)
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.text-description {
  .picList {
    padding: 10px 20px 0;
  }
}
.tip {
  color: #888;
}
.imgPreview {
  max-width: 750px;
  margin-left: 20px;
  margin-bottom: 20px;
}
</style>
>
